<template>
	<view class="body-bar">
		<view class="doctor-bar">
			<image :src="serviceData.doctorId?.avatar" mode=""></image>
			<view class="message-bar">
				<view class="name-bar" style="margin-bottom: 28rpx;"> {{serviceData.doctorId?.name}}<text
						style="font-size: 28rpx;color: #999;margin-left: 12rpx;">全科医生</text></view>
				<text style="font-size: 24rpx;color: #999;">{{'所属机构：'+serviceData.organizationId?.name}}</text>


			</view>
		</view>

		<view class="comment-bar">
			<view class="rate-bar">
				<view class="rate-title">专业知识</view>
				<uni-rate v-model="studyRate" @change="onChange" />
				<text style="display: inline-block;margin-left: 28rpx;" v-if="studyRate==0">评分</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="studyRate==1">非常差</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="studyRate==2">差</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="studyRate==3">一般</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="studyRate==4">好</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="studyRate==5">非常好</text>
			</view>
			<view class="rate-bar">
				<view class="rate-title">服务态度</view>
				<uni-rate v-model="statusRate" @change="onChange" />
				<text style="display: inline-block;margin-left: 28rpx;" v-if="statusRate==0">评分</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="statusRate==1">非常差</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="statusRate==2">差</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="statusRate==3">一般</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="statusRate==4">好</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="statusRate==5">非常好</text>
			</view>
			<view class="rate-bar">
				<view class="rate-title">服务效果</view>
				<uni-rate v-model="serviceRate" @change="onChange" />
				<text style="display: inline-block;margin-left: 28rpx;" v-if="serviceRate==0">评分</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="serviceRate==1">非常差</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="serviceRate==2">差</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="serviceRate==3">一般</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="serviceRate==4">好</text>
				<text style="display: inline-block;margin-left: 28rpx;" v-if="serviceRate==5">非常好</text>
			</view>
		</view>
	</view>

	<view class="footer-bar" style="background-color: rgba(242, 242, 242, 1);">
		<view class="submit" @click="updateRate">提交</view>

	</view>

	<uni-popup ref="popup" type="message">
		<uni-popup-message type="success" message="评价成功" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		getserviceFullDetailApi,
		updateDoctorStateApi,
		updateServiceStateApi
	} from '../../../api/service';

	const serviceId = ref('')

	const popup = ref(null)


	// function open() {
	// 	popup.value.open()
	// }

	// 修改评分
	function updateRate() {
		let rate = (studyRate.value + statusRate.value + serviceRate.value) / 3
		console.log(rate);
		let rates = Math.round(rate)
		updateDoctorStateApi({
				_id: serviceData.value.doctorId._id,
				rate: rates
			})
			.then(res => {
				if (res.code == 200) {
					popup.value.open()
					uni.showToast({
						title: '评价成功'
					})
				}
				uni.navigateBack()
			})
	}

	onLoad((options) => {
		console.log(111, options._id);
		getService(options._id)
		serviceId.value = options._id
	})

	const studyRate = ref(0)
	const statusRate = ref(0)
	const serviceRate = ref(0)

	const serviceData = ref({})
	// 获取服务详情
	function getService(data) {
		getserviceFullDetailApi({
				_id: data
			})
			.then(res => {
				if (res.code == 200) {
					serviceData.value = res.data
				}
			})
	}
</script>

<style scoped>
	.body-bar {
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		width: 750rpx;
		position: relative;


	}



	.doctor-bar {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		height: 222rpx;
		width: 750rpx;
		background-color: #fff;
		padding: 0 32rpx;
		padding-right: 32rpx;
	}

	.doctor-bar image {
		width: 128rpx;
		height: 128rpx;
		border-radius: 12rpx;
		margin-right: 32rpx;
	}

	.comment-bar {
		display: inline-block;
		display: flex;
		flex-direction: column;
		width: 750rpx;
		padding-left: 32rpx;
		background-color: #fff;
	}

	.rate-bar {
		height: 114rpx;
		display: flex;
		align-items: center;
	}

	.rate-title {
		display: inline-block;
		width: 160rpx;
		margin-right: 10rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: 400;
	}

	.rate-bar text {
		color: #999;
	}

	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 160rpx;
		width: 750rpx;
		background-color: (242, 242, 242, 1);
		display: flex;
		justify-content: center;
		padding-top: 20rpx;
	}

	.submit {
		width: 686rpx;
		height: 88rpx;
		background-color: rgba(41, 132, 248, 1);
		border: none;
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: 450;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>